<!DOCTYPE html>
<html>
<head>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/>
    <meta charset="UTF-8">
    <title></title>

    {% include 'template/baseCss.volt' %}

    <link href="/css/vendor/add-drone.less" rel="stylesheet/less" type="text/css">
    <script src="/js/less.min.js"></script>
</head>

<body>

<main>
    <form autocomplete="off">
        <div class="title-bar">
            <label class="server-id">系统状态-数据库使用统计BETA</label>
        </div>


        <div id="info-wrap" >
            <div style="height: 600px;">
                <canvas id="myChart" ></canvas>
            </div>

        </div>
    </form>
</main>

<div style="display: none;">
    <div id="dbStat">{{ dbTableData }}</div>

</div>
</body>

{% include 'template/baseJs.volt' %}
<script src="/js/Chart.min.js"></script>
<script>

    $(function () {

                var data = eval("(" + $("#dbStat").text() + ")");
                var dataArray = new Array();
                var labelArray = new Array();
                for (var key in data) {
                    var item = data[key];
                    labelArray.push(item["TABLE_NAME"]);
                    dataArray.push(item["DATA_SIZE"]);
                }
                var ctx = document.getElementById("myChart");
                var myChart = new Chart(ctx, {
                    type: 'horizontalBar',
                    data: {
                        labels: labelArray,
                        datasets: [{
                            label: '表容量',
                            data: dataArray,
                            backgroundColor: "rgba(82,149,255,0.85)",
                            borderColor: "rgba(0,0,0,0)",
                        }]
                    },
                    options: {
                        // responsive: false,
                        maintainAspectRatio: false,
                    }
                });
            }
    )


</script>

</html>